<template>
  <div class="home">
    <div id="box">
      <div class="input" @click="show = true">
        <span>{{ years }}</span
        >年<span>{{ months }}</span
        >月<span>{{ s }}</span
        >日
      </div>
      <div class="btn" @click="yes">
        确定
      </div>
      <div class="calendar-wrapper" v-show="show">
        <div class="calendar-toolbar">
          <div class="prev" @click="prevMonth">上个月</div>
          <div class="current">{{ currentDateStr }}</div>
          <div class="next" @click="nextMonth">下个月</div>
        </div>
        <div class="date">
          <div
            v-for="item in ['日', '一', '二', '三', '四', '五', '六']"
            :key="item"
          >
            {{ item }}
          </div>
        </div>
        <div class="calendar-inner">
          <div
            id="calendar-item "
            :class="status === index ? 'stus' : ''"
            v-for="(item, index) of calendarList"
            :key="index"
            @click="xz(item, index)"
          >
            {{ item.date }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      current: {}, // 当前时间
      calendarList: [], // 用于遍历显示
      shareDate: new Date(), // 享元模式，用来做优化的
      status: -1,
      years: "",
      months: "",
      s: "",
      ss: localStorage.getItem("s"),
    };
  },
  computed: {
    // 显示当前时间
    currentDateStr() {
      let { year, month } = this.current;
      return `${year}年${this.pad(month + 1)}月`;
    },
  },

  mounted() {
    this.init();
  },
  methods: {
    yes() {
      this.show = false;
      this.years = this.current.year;
      this.months = this.current.month + 1;
    },
    xz(item, i) {
      this.status = i;
      this.s = item.date;
      console.log(this.s);
      localStorage.setItem("s", this.s);
    },
    init() {
      // 初始化当前时间
      this.setCurrent();
      this.calendarCreator();
    },
    // 判断当前月有多少天
    getDaysByMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    },
    // 对小于 10 的数字，前面补 0
    pad(str) {
      return str < 10 ? `0${str}` : str;
    },
    // 点击上一月
    prevMonth() {
      this.current.month--;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 点击下一月
    nextMonth() {
      this.current.month++;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 格式化时间，与主逻辑无关
    stringify(year, month, date) {
      let str = [year, this.pad(month + 1), this.pad(date)].join("-");
      return str;
    },
    setCurrent(d = new Date()) {
      let year = d.getFullYear();
      let month = d.getMonth();
      let date = d.getDate();
      this.current = {
        year,
        month,
        date,
      };
    },
    // 修正 current
    correctCurrent() {
      let { year, month, date } = this.current;

      let maxDate = this.getDaysByMonth(year, month);
      // 预防其他月跳转到2月，2月最多只有29天，没有30-31
      date = Math.min(maxDate, date);

      let instance = new Date(year, month, date);
      this.setCurrent(instance);
    },
    calendarCreator() {
      // 一天有多少毫秒
      const oneDayMS = 24 * 60 * 60 * 1000;

      let list = [];
      let { year, month } = this.current;

      // 当前月，第一天和最后一天的毫秒数
      let begin = new Date(year, month, 1).getTime();
      let end = new Date(year, month + 1, 0).getTime();

      while (begin <= end) {
        // 享元模式，避免重复 new Date
        this.shareDate.setTime(begin);
        let year = this.shareDate.getFullYear();
        let curMonth = this.shareDate.getMonth();
        let date = this.shareDate.getDate();
        list.push({
          year: year,
          month: curMonth,
          date: date,
          value: this.stringify(year, curMonth, date),
        });
        begin += oneDayMS;
      }
      this.calendarList = list;
    },
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  #box {
    width: 500px;
    margin: 100px auto;
    position: relative;
    .input {
      width: 400px;
      height: 50px;
      border: #ccc 1px solid;
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 50px;
      display: flex;
      span {
        flex: 1;
      }
    }
    .btn {
      width: 100px;
      height: 50px;
      position: absolute;
      top: 0;
      border: 1px solid #ccc;
      right: -10px;
      background: cornflowerblue;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
  .calendar-wrapper {
    width: 500px;
    height: 360px;
    // background: #ccc;
    border: 1px solid #ccc;
    .date {
      background: rgb(35, 137, 206);
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 20px;
    }
    .date div {
      margin: 0;
      padding: 0;
      display: inline-block;
      height: 20px;
      width: 60px;
    }
    .calendar-toolbar {
      width: 100%;
      height: 50px;
      // background: orange;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      display: flex;
      .prev {
        flex: 2;
      }
      .current {
        flex: 6;
        color: cornflowerblue;
      }
      .next {
        flex: 2;
      }
    }
    .calendar-inner {
      width: 100%;
      div {
        float: left;
        width: 80px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
      }
    }
  }
  .stus {
    background: cornflowerblue;
    color: #fff;
  }
}
</style>
